﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <div class="demoTable">
        <form class="layui-form" onsubmit="return false;">
            商品名称：
            <div class="layui-inline">
                <input class="layui-input" name="DanPinName" id="DanPinName" autocomplete="off" />
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </form>
    </div>
 
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script id="toolbarDemo" type="text/html">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-normal" lay-event="del">批量删除</button>

        </div>
    </script>

    <script id="barDemo" type="text/html">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script src="~/js/jquery.min.js"></script>
    <script src="~/lib/layui/layui.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>
        layui.use(['table', 'layer', 'form'], function () {
            $ = layui.jquery;
            var layer = layui.layer, table = layui.table, form = layui.form;

  table.render({
    elem: '#test'
      , url:'/Product/Search'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '新闻数据表'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,cols: [[
        { type: 'checkbox', fixed: 'left' }
        , { field:'DanPinName', title:'商品名', width:120, edit: 'text'}
        , { field:'KuChun', title:'库存', width:120, edit: 'text', sort: true}
        , { field:'Price', title:'价格', width:100}
        , { field: 'ImgUrl', title: '图片路径', width: 100,templet: '<div><img src="{{d.ImgUrl}}"/></div>' }
        , { field: 'ShopName', title: '类别', width: 120, sort: true }
        , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }



    ]]
      , page: true
      , id: 'testReload'
    ,
  });

  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
        case 'add':
            layer.open({
                type: 2
                , area: ["40%", "60%"]
                , content: '/Product/AddProductData'
                , end: function () {
                    tableIns.reload({
                        where: {
                            name: $("#name").val
                        }
                    })
                }
            });
            break;
        case 'del':
                var data = checkStatus.data;
                var ids = [];
                for (var i = 0; i < data.length; i++) {
                    let obj = data[i];
                    ids.push(obj.Id);//push添加新的元素到数组，并且返回一个新的长度的数组
                }
                if (ids.length == 0) {
                    layer.msg("您必须勾选要删除的新闻数据");
                    return;
                }
                var idsx = ids.join(',');
            console.log("需要删除的数据为:" + idsx);

            $.post("/Product/PubDel", { id: idsx }, function (res) {
                    if (res.success) {
                        layer.msg("删除成功");
                        active["reload"].call(null);
                    } else {
                        layer.alert(res.message);
                    }
                }, "json");


            break;
    };
  });




  //监听行工具事件
  table.on('tool(test)', function(obj){
      var data = obj.data;
      if (obj.event === 'del') {
          layer.confirm('真的删除行么', function (index) {
              $.post("/Product/del", { Id: obj.data.Id }, function (res) {
                  if (res.success) {
                      obj.del();
                      layer.close(index);
                      layer.msg('删除成功');
                  } else {
                      layer.msg('删除失败');
                  }
              })

          });
      } else if(obj.event === 'edit'){
      //layer.prompt({
      //  formType: 2
      //  ,value: data.email
      //}, function(value, index){
      //  obj.update({
      //    email: value
      //  });
      //  layer.close(index);
      //});
          var id=data['Id']
          layer.open({
              type: 2
              , area: ["40%", "60%"]
              , content: '/Product/EditProduct?Id='+id
              , end: function () {
                  tableIns.reload({
                      where: {
                          name: $("#name").val
                      }
                  })
              }
          });
    }
  });
});
        active = {
            reload: function () {
                table.reload('testReload', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        DanPinName: $('#DanPinName').val()
                    }
                }, 'data');

            }
        };
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    </script>

</body>
</html>
